<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>个人中心</title>
    <link rel="Shortcut Icon" href="../../imgs/Kat-icon.png">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css" type="text/css">
    <link rel="stylesheet" href="../../css/head.css">
    <link rel="stylesheet" href="../../css/alert.css">
    <link rel="stylesheet" href="../../css/change.css">
    <link rel="stylesheet" href="../../css/droppicker.min.css">
</head>

<body>
    <!-- 导航开始 -->
    <div>
        <div class="container-fluid">
            <div class="row" style="background-color:rgb(1,81,40)">
                <ul class="nav navbar-nav navbar-right" style="padding-right: 20px;font-size: 10px;" id="head">
                    <li><a href="#">欢迎&nbspxxx!</a></li>
                    <li><a href="../login.html">安全退出</a></li>
                    <li><a href="#">个人中心</a></li>
                </ul>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <ul class="nav navbar-nav" id="daohang" style="width: 100%">
                    <li style="padding-top: 0px;">
                        <img src="../../imgs/logo1 .png" alt="" style="width: 60px; height:60px;">
                    </li>
                    <li><a href="../index/index.html">
                            首页
                        </a></li>
                    <li><a href="../register.html">
                            预约挂号
                        </a></li>
                    <li><a href="../department.html">
                            科室导航
                        </a></li>
                    <li><a href="../science/science.html">
                            健康科普
                        </a></li>
                    <li><a href="#">
                            留言咨询
                        </a></li>
                    <ul class="nav navbar-nav navbar-right">
                        <li style="padding-top: 10px;"><a href="../map/MapShow.html">医院位置导航<img src="../../imgs/地图.png"
                                    style="width: 15px; margin-left:5px "></a></li>
                    </ul>
                </ul>
            </div>
        </div>
        <!-- 导航结束 -->
        <!-- 个人中心视图 -->
        <div class="personal" style="height: 500px; width: 70%;">
            <div>
                <div class="leftlist"><br>
                    <div style="position: relative; width: 500px;float: left;">
                        <input id="div" readonly type="text" style="width:500px;height:30px;float: left">
                    </div>
                    <div style="float: right;margin-left: 100px;">
                        <span style="color: rgb(180, 180, 180)">知医治第一医院</span>
                        <span style="padding-left: 30px; color: rgb(180, 180, 180)">医师:欧阳芳</span>
                    </div>
                </div>
            </div>
            <div style="clear: both;"></div>
            <hr>
            <div class="details">
                <span>就诊人:</span>
                <span>轩辕折</span><br>
                <span>身份证号:</span>
                <span>232323199909091010</span><br>
                <span>手机号:</span>
                <span>188-8888-8888</span><br>
            </div>
            <hr>
            <div class="details" style="float:left;">
                <div class="texts">
                    <h4><b>温馨提示:</b></h4>
                    <span style="padding-left:33px;">更改科室如果挂号费用与原挂号费用相同则不需要再次支付挂号费用,</span><br>
                    <span>挂号费用有变化需要再次发起支付,原挂号费用将全部退回到您付款方式的</span><br>
                    <span>钱包中,退款将在3个工作日内退还,若有支付问题请反馈。</span>
                </div>
                <span>原挂号费用:</span>
                <span class="glyphicon glyphicon-yen" style="color: rgb(5, 160, 80)">20.00</span><br><br>
                <span>该科室挂号费用:</span>
                <span class="glyphicon glyphicon-yen" style="color: rgb(5, 160, 80)">20.00</span><br>
            </div>
            <div class="details" style="float:right;margin-right:50px;">
                <span><a href="orderdetails.html"><button><small>取消修改</small></button></a></span>&nbsp;&nbsp;&nbsp;
                <span><button class="alert-api-button alert-btn4"><small>确认修改</small></button></span>
            </div>
        </div>

        <!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
        <script src="../../plugins/jquery/jquery.min.js"></script>
        <!--引入bootstrap的js文件-->
        <script src="../../plugins/bootstrap/js/bootstrap.js"></script>
        <!-- 引入四级联动js -->
        <script src="../../js/droppicker.min.js"></script>
        <!-- 引入alert的js文件 -->
        <script src='../../js/alert.js'></script>
        <script type="text/javascript">
            $('#div').droppicker({
                placeholder: "请选择文件1231位置",
                data: function (type, code, callback) {
                    console.log(type);
                    console.log(code);
                    // 有需要可换成 ajax... 可根据参数动态获取，格式要按返回
                    if (type == 'droplevel1') {
                        return callback([{
                            code: "89",
                            name: "内科"
                        }, {
                            code: "90",
                            name: "外科"
                        }, {
                            code: "91",
                            name: "儿科"
                        }]);
                    } else if (type == 'droplevel2') {
                        return callback([{
                            code: "1",
                            name: "神经内科"
                        }, {
                            code: "2",
                            name: "胃肠科"
                        }, {
                            code: "3",
                            name: "胸腔科"
                        }]);
                    } else if (type == 'droplevel3') {
                        return callback([{
                            code: "1",
                            name: "张三(医师)"
                        }, {
                            code: "2",
                            name: "李四(专家)"
                        }, {
                            code: "3",
                            name: "王五(医师)"
                        }]);
                    } else if (type == 'droplevel4') {
                        return callback([{
                            code: "1",
                            name: "2019年10月16日 7:00-8:00"
                        }, {
                            code: "2",
                            name: "2019年11月16日 7:00-8:00"
                        }, {
                            code: "3",
                            name: "2019年12月16日 7:00-8:00"
                        }]);
                    }
                },
                droplevel1: { name: '主科室', code: '89' },// 修改时传入
                droplevel2: { name: '副科室', code: '2' },// 修改时传入
                droplevel3: { name: '医师/类型', code: '2' },// 修改时传入
                droplevel4: { name: '近期可挂号时间', code: '3' },// 修改时传入
                callback: function (data) {
                    // 数据回调
                    console.log(data);
                }
            });

            function getcode() {
                // 获取哪个传那个 droplevel1 droplevel2 droplevel3 droplevel4
                alert($('#div').data('droppicker').getCode('droplevel4'));
            }

            function destroy() {
                $('#div').droppicker('destroy');
            }

            function reset() {
                $('#div').droppicker('reset');
            }

        </script>
        <script>
            var M = {}
            // 按钮四
            $(document).delegate(".alert-btn4", 'click', function () {
                if (M.dialog4) {
                    return M.dialog4.show();
                }
                M.dialog4 = jqueryAlert({
                    'title': '知医治',
                    'content': '确定修改科室信息<br>更改后该订单不可再次变更<br>确认修改将跳往支付页面',
                    'modal': true,
                    'animateType': '',
                    'buttons': {
                        '返回': function () {
                            M.dialog4.close();
                        },
                        '确认': function () {
                            if (M.dialog41) {
                                return M.dialog41.show();
                            }
                            M.dialog41 = jqueryAlert({
                                'content': '取消成功'
                            })
                            function jump() {
                                window.location.href = 'order.html';
                            }
                            setTimeout(jump, 1500);


                        }
                    }
                })
            })
        </script>
</body>

</html>